📖 스토리북 링크 (Storybook Link)

변경된 UI 컴포넌트를 시각적으로 확인하고 인터랙션해볼 수 있는 스토리북 링크를 첨부합니다.

• 바로가기

🔗 관련 이슈 번호 (Related Issue Number)

이 Pull Request가 해결하고자 하는 이슈의 번호를 기재합니다. 이슈 연결을 통해 작업의 배경과 목적을 쉽게 파악할 수 있습니다. (예: Closes #123)

• Closes [FIX] 사이드바 오픈시 컨텐츠 밀림 현상을 수정한다. #317

✨ PR 세부 내용 (PR Details)

이번 PR에서 어떤 작업을 했는지 상세하게 설명합니다. 코드 변경의 이유, 구현 방식, 주요 로직 등을 중심으로 작성하면 리뷰어가 이해하는 데 도움이 됩니다.

작업 개요
**- 사이드바 동작에 의해 대시보드 콘텐츠 밀리는 버그 해결

• 디자인 스펙에 맞춰 lg 브레이크포인트를 1440px로 상향
• 데스크톱에서 사이드바를 relative 포지셔닝으로 변경하여 레이아웃 통합**

주요 변경사항

• 대시보드 레이아웃
  • 중앙 정렬 및 최대 폭 제한 (max-w-1296)
  • h-screen + overflow-hidden으로 페이지 전체 스크롤 방지
  • MainContent 영역만 독립적으로 스크롤 (overflow-y-auto)
• 사이드바
  • 모바일/태블릿: fixed 오버레이 패널 + 배경 딤(bg-black/20), 클릭 닫기
  • 데스크톱(lg): relative 포지셔닝으로 레이아웃에 통합, 오버레이 제거
  • 닫힘 상태: md에서 아이콘바(폭 80) 유지, 메인 컨텐츠 md:pl-93으로 겹침 방지
  • 스크롤 방지: 모바일/태블릿(<1440px)에서만 document.body.style.overflow = 'hidden' 적용
  • 내부 스크롤 정리, 하단 “+ 목표추가” sticky 처리.
  • 헤더 레이아웃 justify-between으로 버튼 우측 정렬.
• 카드 공통 스타일
  • x-auto로 sm/md 중앙 정렬, lg:mx-0로 해제하여 그리드 호환

기술적 구현 사항

• 레이아웃 구조 변경
  • 기존: min-h-screen + 페이지 전체 스크롤
  • 개선: h-screen + 고정 높이, 컨텐츠 영역만 스크롤
  • 사이드바가 레이아웃 높이를 차지하도록 h-full 적용
• 중앙 정렬 vs. 반응형 너비 공존 전략
  • 카드 사이즈에 mx-auto + lg:mx-0를 사용해 sm/md는 중앙, lg는 레이아웃 그리드 우선을 보장.
  • 대시보드 상단 컨테이너에 max-w-1296을 적용하고, md 레일 폭만큼 md:pl-93으로 겹침 방지
• 사이드바 오버레이
  • 오버레이는 fixed inset-0 + 투명도 트랜지션, 패널은 fixed로 트랜지션 처리
  • 데스크톱에서는 lg:hidden으로 오버레이 완전 제거
  • 내용 영역은 flex-1 overflow-y-auto, 하단 CTA는 sticky bottom-0

질문

• 사이드바가 펼쳐질때 뒤의 컨텐츠들과 겹쳐보이는 게 혼란스럽다고 느껴져 배경딤을 추가했는데, 어떤가요?

📸 참고할 스크린샷/영상 (Screenshots/Videos)

작업 내용과 관련된 시각적인 자료가 있다면 첨부합니다. UI 변경이나 새로운 기능의 동작 방식을 보여주는 스크린샷 또는 영상을 활용하면 리뷰어의 이해를 돕습니다.

mobile

open	close

tablet

open	close

pc

before-open	before-close

after-open	after-close